import {
  Button,
  HeroSection,
  HeroBody,
  HeroTeaser,
  HeroActionList,
  HeroAction,
  FeatureSection,
  FeatureList,
  Feature,
  FeatureImage,
  FeatureTitle,
  FeatureText,
  ScreenContainer,
} from 'smooth-doc/components'

import { Link } from 'gatsby'

import Sandbox from './HeroSandbox'
import Title from './HeroSandbox/Title'
import ReactUseGesture from './docs/code/rug'

import compassImageURL from '../images/compass.svg'
import gameImageURL from '../images/game.svg'
import toolsImageURL from '../images/tools.svg'

import Shields from './partials/shields'

<Sandbox />
<HeroSection>
  <HeroBody style={{ width: '100%', textAlign: 'center', padding: '46px 0' }}>
    <Title>move it, zoom it, drag it, scroll it, pinch it</Title>
    <HeroTeaser>
      <ReactUseGesture />
      &nbsp;&nbsp;is the only gesture hooks you'll need.
    </HeroTeaser>
    <HeroActionList style={{ justifyContent: 'center' }}>
      <HeroAction>
        <Button variant="primary" forwardedAs={Link} to="/docs/" style={{WebkitAppearance: 'none'}}>
          Browse Docs
        </Button>
      </HeroAction>
    </HeroActionList>


  </HeroBody>
</HeroSection>


<FeatureSection>
  <FeatureList>
    <Feature col={{ xs: 1, md: 1 / 3 }}>
      <FeatureImage src={toolsImageURL} width={100} height={100} />
      <FeatureTitle>Gestures made simple</FeatureTitle>
      <FeatureText style={{ textAlign: 'left' }}>
        <ReactUseGesture /> allows you to implement advanced UI interactions with just a few lines of code.
      </FeatureText>
    </Feature>
    <Feature col={{ xs: 1, md: 1 / 3 }}>
      <FeatureImage src={compassImageURL} width={100} height={100} />
      <FeatureTitle>Configurable to your needs</FeatureTitle>
      <FeatureText style={{ textAlign: 'left' }}>
        Gestures can be customized with advanced options that should answer most common usecases.
      </FeatureText>
    </Feature>
    <Feature col={{ xs: 1, md: 1 / 3 }}>
      <FeatureImage src={gameImageURL} width={100} height={100} />
      <FeatureTitle>Plays well with any animation library</FeatureTitle>
      <FeatureText style={{ textAlign: 'left' }}>
        Any animation framework can work! <ReactUseGesture /> operates nicely with both{' '}
        <a href="https://github.com/pmndrs/react-spring">React Spring</a> and{' '}
        <a href="https://github.com/pmndrs/react-three-fiber">React Three Fiber</a>
      </FeatureText>
    </Feature>
  </FeatureList>
</FeatureSection>

<footer>
  <ScreenContainer>
    <Shields />
    <div>
      Copyright © 2020{' '}
      <a href="https://pmnd.rs/" target="_blank" rel="noopener noreferrer">
        <strong>pmndrs</strong>
      </a>
      . Built with <a href="https://smooth-doc.com/" target="_blank" rel="noopener noreferrer">
        Smooth Doc
      </a>. Illustrations by <a href="https://illlustrations.co/" target="_blank" rel="noopener noreferrer">
        Vijay Verma
      </a>.
    </div>
  </ScreenContainer>
</footer>
